<template>
  <RangePicker
    v-model:value="timeValue"
    format="YYYY-MM-DD HH:mm:ss"
    show-time
    :disabled-date="disabledDate"
    :default-time="defaultDateRange"
    value-format="YYYY-MM-DD HH:mm:ss"
  />
</template>
<script setup lang="tsx">
import { watch } from 'vue';
import { RangePicker } from 'ant-design-vue';
import dayjs from 'dayjs';

const timeValue = defineModel<any>('timeValue');
const emit = defineEmits(['update:timeValue', 'updateDate']);

// 计算当前月的起始和结束时间
const currentMonthStart = dayjs().startOf('month');
const currentMonthEnd = dayjs().endOf('month');

// 计算上个月的起始和结束时间
const lastMonthStart = dayjs().subtract(1, 'month').startOf('month');
const lastMonthEnd = dayjs().subtract(1, 'month').endOf('month');

// 默认选择上个月1号到当前月末
const defaultDateRange = [lastMonthStart, currentMonthEnd];
const disabledDate = (val: any) => {
  const current = dayjs();
  return (val = current.endOf('day') && val > current.endOf('day'));
};

watch(
  timeValue,
  (newValue) => {
    if (!newValue || newValue.length === 0) {
      emit('updateDate', newValue);
    }
  },
  {
    deep: true,
  },
);
</script>
